<template>
  <!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <div style="width: 100%;height: 100%;">
    <svg
      style="transform: scale(2.0,1.5);"
      ref="mysvg"
      id="s2"
      width="100%"
      height="100%"
      viewBox="0 0 1080 940"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <image
        width="3840"
        height="2160"
        style="overflow:visible;"
        xlink:href="@/assets/images/changgui.png"
        transform="matrix(0.2822 0 0 0.2822 -1.9081 195.6358)"
      ></image>
      <filter id="glow">
        <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
        <feMerge>
          <feMergeNode in="coloredBlur" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      <g v-for="item in resultArray" :key="item.id">
        <g
          @click="handleClickItem(item)"
          @mouseenter="mouseenterItem(item)"
          :transform="`translate(${item.d0x || -100},${item.d0y || -100})`"
          v-tooltip="{
            ref: 'tooltipRef',
            delay: 0,
            class: 'tooltip-custom'
          }"
        >
          <text
            :fill="rendererColor(item.deviceStatus)"
            font-size="15"
            id="svg_112"
            text-anchor="middle"
            stroke="#fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            xml:space="preserve"
            x="0"
            y="5"
          >
            <tspan
              v-for="(t, tIndex) in getTspan(item.tempAreaCount)"
              :key="tIndex"
              :x="t.x"
              :y="t.y"
            >
              {{ item[t.key] || "--" }}℃
            </tspan>
          </text>
          <rect
            x="-34"
            :y="getRectY(item.tempAreaCount)"
            width="68"
            :height="getRectHeight(item.tempAreaCount)"
            rx="3"
            ry="3"
            :fill="rendererColor(item.deviceStatus, 0.2)"
            :stroke="rendererColor(item.deviceStatus)"
            stroke-width="1"
            filter="url(#glow)"
            opacity="1"
          />

          <circle
            :class="item.deviceStatus == '101' ? 'loading-circle-1' : ''"
            cx="0"
            cy="20"
            r="6"
            :stroke="rendererColor(item.deviceStatus)"
            :fill="rendererColor(item.deviceStatus)"
          />
        </g>

        <path
          v-if="item.d2"
          :ref="'path' + item.deviceToken"
          style="opacity: 0.5;"
          :id="item.token"
          :fill="rendererColor(item.deviceStatus)"
          :d="item.d2"
        >
          <!-- <animate
            attributeName="stroke"
            :values="`#235fa7;${rendererColor(item.deviceStatus)};#235fa7;`"
            dur="1.6s"
            begin="0s"
            repeatCount="indefinite"
          /> -->
        </path>
      </g>
    </svg>
    <!-- 浮窗 -->
    <div
      v-show="JSON.stringify(row) !== '{}'"
      ref="tooltipRef"
      class="tooltip-content"
    >
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>设备编号: {{ row.deviceToken }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>设备名称: {{ row.deviceName }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>制造单元: {{ row.manufactureSite }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>
          程序运行时间:
          <span v-if="!row.programRunTime || row.programRunTime == '0'">
            --
          </span>
          <span v-else>
            {{ row.programRunTime | formatDate }}
          </span>
        </div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>
          程序设定时间:
          <span v-if="!row.programSetTime || row.programSetTime == '0'">
            --
          </span>
          <span v-else>
            {{ row.programSetTime | formatDate }}
          </span>
        </div>
      </div>
      <div
        v-for="(item, index) in getTspan(row.tempAreaCount)"
        :key="item.key"
        style="display: flex;align-items: center;"
        class="tool_item"
      >
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <!-- firstRealTemp secondRealTemp thirdRealTemp -->
        <div>
          PV{{ index + 1 }}:
          <span> {{ row[item.key] }}℃ </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DEVICE_STATE } from "../constant";
import { hex2Rgba } from "@/utils/utils";
export default {
  computed: {
    getTspan() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        // firstRealTemp secondRealTemp thirdRealTemp
        switch (count) {
          case 1:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "6"
              }
            ];
          case 2:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "-10"
              },
              {
                key: "secondRealTemp",
                x: "-2",
                y: "6"
              }
            ];
          case 3:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "-25"
              },
              {
                key: "secondRealTemp",
                x: "0",
                y: "-10"
              },
              {
                key: "thirdRealTemp",
                x: "-2",
                y: "6"
              }
            ];

          default:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "6"
              }
            ];
        }
      };
    },
    // 获取矩形偏移
    getRectY() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return -10;
          case 2:
            return -26;
          case 3:
            return -40;

          default:
            return -10;
        }
      };
    },
    // 获取矩形高度
    getRectHeight() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return 20;
          case 2:
            return 36;
          case 3:
            return 50;

          default:
            return 20;
        }
      };
    },

    rendererColor() {
      return function(status, alpha = 1) {
        const color =
          DEVICE_STATE.find(item => item.value == status)?.color || "#929292";
        return hex2Rgba(color, alpha);
      };
    }
  },
  props: {
    activeName: {
      type: String,
      default: ""
    },
    resultArray: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      row: {}
    };
  },
  mounted() {},
  methods: {
    handleClickItem(item) {
      this.$emit("handleClick", item);
    },
    mouseenterItem(row) {
      this.row = _.cloneDeep(row);
    }
  }
};
</script>

<style type="text/css">
.st0 {
  opacity: 0.2;
  fill: #bcc4d8;
}
.st1 {
  opacity: 0.2;
  fill: #ffffff;
}
.st2 {
  opacity: 0.2;
  fill: #bdc6da;
}
.st3 {
  opacity: 0.2;
  fill: #758598;
}
.st4 {
  opacity: 0.2;
  fill: #c0cade;
}
.st5 {
  opacity: 0.1;
  fill: #b1b9cb;
}
.st6 {
  opacity: 0.1;
  fill: #f0e9b6;
}
.st7 {
  opacity: 0.1;
  fill: #ede6b4;
}
.st8 {
  opacity: 0.2;
  fill: #ede7b4;
}
.st9 {
  opacity: 0.1;
  fill: #f6edb8;
}
.st10 {
  opacity: 0.1;
  fill: #a0a6b7;
}
.st11 {
  opacity: 0.1;
  fill: #818da4;
}
.st12 {
  opacity: 0.1;
  fill: #aeb4c6;
}
.st13 {
  opacity: 0.1;
  fill: #c8d4eb;
}
.st14 {
  opacity: 0.1;
  fill: #c4d0e7;
}
.st15 {
  opacity: 0.1;
  fill: #7f8a87;
}
</style>
